<template>
	<view class="indexInfo">
		<nav-bars title="装修贷"></nav-bars>
		<view class="content">
			<view class="topBgBox">
				<image :src="`${baseImg}/static/adminShop/decLoan/topBg.png`" mode=""></image>
				<view class="btnMore">
					<view class="price">6990<text>元</text></view>
					<view class="checkBox">
						<u-checkbox-group>
							<u-checkbox v-model="checked" size="30" active-color="#B75E24"><text class="checkText">我已阅读并接受《隐私政策》《服务条款》</text></u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="checkBtn">
						<button type="default" @click="toIndex">点击申请</button>
					</view>
				</view>
			</view>
			<view class="infoBox">
				<view class="allInfoBox">
					<view class="topTitle">
						<image :src="`${baseImg}/static/adminShop/decLoan/left.png`" mode=""></image>
						融易装-装修贷
						<image :src="`${baseImg}/static/adminShop/decLoan/right.png`" mode=""></image>
					</view>
					<view class="item">
						<view class="topTag">
							为什么选择融易装装修分期
							<image :src="`${baseImg}/static/adminShop/decLoan/navLeft.png`" mode=""></image>
						</view>
						<view class="info">
							<text class="tit">费率低至</text>
							<view class="num">0.233<text>%</text></view>
							<view class="max">额度最高50万</view>
							<view class="nav">
								<view class="navItem">
									96期
									<text>起购金额</text>
								</view>
								<view class="navItem">
									不罚息
									<text>提前还款</text>
								</view>
								<view class="navItem">
									1对1
									<text>专人服务</text>
								</view>
							</view>
						</view>
					</view>
					<view class="centerItem">
						<view class="topTag">
							优惠金额测算
							<view class="txt">以20万60期，费率以0.233%为例</view>
						</view>
						<view class="info">
							<view class="imgList">
								<view class="listItem">
									<image :src="`${baseImg}/static/adminShop/decLoan/icon_1.png`" mode=""></image>
									<text>月费率0.233%</text>
								</view>
								<view class="listItem">
									<image :src="`${baseImg}/static/adminShop/decLoan/icon_2.png`" mode=""></image>
									<text>月本金3333元</text>
								</view>
								<view class="listItem">
									<image :src="`${baseImg}/static/adminShop/decLoan/icon_3.png`" mode=""></image>
									<text>月利息466元</text>
								</view>
							</view>
							<view class="text">
								月节省利息154元，5年节省利息9240，24期免息再优惠利息11184元
							</view>
							<view class="savePrice">
								共节省利息：20424元
							</view>
						</view>
					</view>
					<view class="lastItem">
						<view class="topTag">
							办理流程
							<image :src="`${baseImg}/static/adminShop/decLoan/navLeft.png`" mode=""></image>
						</view>
						<view class="process">
							<view class="itemProcess">
								<view class="imgBox">
									<image :src="`${baseImg}/static/adminShop/decLoan/icon1.png`" mode=""></image>
								</view>
								<view class="processText">点击报名</view>
							</view>
							<view class="processIcon"><text>▪▪</text><text class="iconfont icon-more"></text></view>
							<view class="itemProcess">
								<view class="imgBox">
									<image :src="`${baseImg}/static/adminShop/decLoan/icon1.png`" mode=""></image>
								</view>
								<view class="processText">平台内部<text>提交信息</text></view>
							</view>
							<view class="processIcon"><text>▪▪</text><text class="iconfont icon-more"></text></view>
							<view class="itemProcess">
								<view class="imgBox">
									<image :src="`${baseImg}/static/adminShop/decLoan/icon1.png`" mode=""></image>
								</view>
								<view class="processText">银行审批<text>放款</text></view>
							</view>
							<view class="processIcon"><text>▪▪</text><text class="iconfont icon-more"></text></view>
							<view class="itemProcess">
								<view class="imgBox">
									<image :src="`${baseImg}/static/adminShop/decLoan/icon1.png`" mode=""></image>
								</view>
								<view class="processText">装修范畴<text>任意消费</text></view>
							</view>
						</view>
						<view class="lastText">
							办理条件：是否平台装修均可办理，资料仅需要身份证、房产证明。
						</view>
					</view>
					<view class="checkBottom">
						<view class="checkBox">
							<u-checkbox-group>
								<u-checkbox v-model="checked" size="30" active-color="#B75E24"><text class="checkText">我已阅读并接受《隐私政策》《服务条款》</text></u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
					<view class="lastBtn">
						<button type="default" @click="toIndex">点击申请</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import service_decLoan from '@/service/decLoan.js'
	export default{
		data(){
			return{
				baseImg:this.$static,
				checked:false
			}
		},
		onShareAppMessage(res) {
			console.log(res,'fenixang ')
			if(res.from=='menu'){}
			return{
				title:'融易装-装修贷',
				path:'/pages_decLoan/pages/indexInfo/indexInfo',
				imageUrl:`${this.baseImg}/static/adminShop/decLoan/topBg.png`
			}
		},
		onLoad(options) {
			this.$utils.getUrl()
		},
		methods:{
			// 点击按钮
			toIndex(){
				if(this.checked){
					// 获取当前申请状态
					service_decLoan.getDecLoanStatus().then(res=>{
						if(res.code==1){
							uni.navigateTo({
								url:'../index/index'
							})
						}else{
							uni.navigateTo({
								url:'../success/success'
							})
						}
					})
				}else{
					uni.showToast({
						title:'请确认接受并勾选《隐私政策》《服务条款》',
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.indexInfo{
		position: relative;
		.content{
			width: 100%;
			padding-bottom: 40rpx;
			.topBgBox{
				position: relative;
				background-color: #253966;
				image{
					width: 100.2%;
					margin-left: -2rpx;
					height: 1400rpx;
				}
				.btnMore{
					position: absolute;
					top: 560rpx;
					left: 110rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.price{
						font: bold 100rpx/100rpx SweiMarkerSansCJKsc;
						color: #913B00;
						text{
							font-size: 40rpx;
							line-height: 40rpx;
						}
					}
					.checkBox{
						.u-checkbox__icon-wrap{
							border-color: #B75E24;
						}
						checkbox{
							width: 22rpx;
							height: 22rpx;
						}
						.checkText{
							font: 400 26rpx/76rpx Source Han Sans CN;
							color: #B75E24;
						}
					}
					.checkBtn{
						width: 458rpx;
						height: 77rpx;
						button{
							width: 100%;
							height: 100%;
							border-radius: 39rpx;
							background: linear-gradient(0deg, #486095 0%, #223663 100%);
							box-shadow: 0rpx 6rpx 27rpx 0rpx rgba(183, 94, 36, 0.38);
							font: bold 34rpx/77rpx Source Han Sans CN;
							color: #fff;
							text-shadow: 0rpx 1rpx 0rpx rgba(255, 255, 255, 0.38);
						}
					}
				}
			}
			.infoBox{
				width: 100%;
				position: absolute;
				top: 1200rpx;
				background-color: #253966;
				padding-bottom: constant(safe-area-inset-bottom);				padding-bottom: env(safe-area-inset-bottom);
				.allInfoBox{
					width: 690rpx;
					overflow: hidden;
					background-color: #3C5081;
					border-radius: 10rpx;
					margin: 0 auto 40rpx;
					.topTitle{
						width: 100%;
						padding: 0 50rpx;
						height: 114rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-radius: 10rpx 10rpx 0 0 ;
						font: bold 54rpx/114rpx Source Han Sans CN;
						color: #fff;
						background:linear-gradient(0deg, #DAB693 0%, #CA8F6F 100%) ;
						image{
							width: 98rpx;
							height: 43rpx;
						}
					}
					.item{
						width: 629rpx;
						background-color: #fff;
						border-radius: 10rpx;
						padding: 30rpx 0 129rpx 0;
						margin: 37rpx auto;
						.topTag{
							width: 447rpx;
							height: 69rpx;
							padding-left: 10rpx;
							background: linear-gradient(0deg, #E5C6A7 0%, #EBD3BB 100%);
							box-shadow: 0rpx 6rpx 27rpx 0rpx rgba(204, 147, 114, 0.38);
							border-radius: 0rpx 35rpx 35rpx 0rpx;
							font: 400 32rpx/69rpx Source Han Sans CN;
							color: #743B1A;
							position: relative;
							image{
								width: 13rpx;
								height: 117rpx;
								position: absolute;
								left: -12rpx;
								top: -18rpx;
							}
						}
						.info{
							text-align: center;
							margin-top: 97rpx;
							.tit{
								font: bold 45rpx/65rpx Source Han Sans CN;
								color: #743B1A;
							}
							.num{
								font: bold 115rpx/115rpx Source Han Sans CN;
								color: #FF4800;
								text{
									font-size: 45rpx;
									line-height: 45rpx;
								}
							}
							.max{
								font: 400 30rpx/30rpx Source Han Sans CN;
								color: #743B1A;
								margin: 44rpx 0 59rpx 0;
							}
							.nav{
								padding: 0 80rpx;
								font: 400 30rpx/40rpx Source Han Sans CN;
								color: #3C5081;
								display: flex;
								align-items: center;
								justify-content: space-between;
								.navItem{
									display: flex;
									flex-direction: column;
									align-items: center;
								}
							}
						}
					}
					.centerItem{
						width: 629rpx;
						background-color: #fff;
						border-radius: 10rpx;
						margin: 37rpx auto;
						.topTag{
							width: 100%;
							height: 133rpx;
							border-radius: 10rpx 10rpx 0 0 ;
							background: linear-gradient(0deg, #DAB693 0%, #CA8F6F 100%);
							box-shadow: 0rpx 6rpx 27rpx 0rpx rgba(204, 147, 114, 0.38);
							font: bold 50rpx/82rpx Source Han Sans CN;
							color: #fff;
							text-align: center;
							.txt{
								font-size: 28rpx;
								font-weight: 400;
								line-height: 28rpx;
							}
						}
						.info{
							padding: 60rpx 80rpx;
							.imgList{
								.listItem{
									display: flex;
									align-items: center;
									margin: 20rpx 0;
									font: bold 32rpx/32rpx Source Han Sans CN;
									color: #223663;
									image{
										width: 50rpx;
										height: 50rpx;
										margin-right: 19rpx;
									}
								}
							}
							.text{
								font: 400 26rpx/36rpx Source Han Sans CN;
								color: #223663;
								margin-top: 48rpx;
							}
							.savePrice{
								font: 400 26rpx/36rpx Source Han Sans CN;
								color: #743B1A;
								margin-top: 59rpx;
							}
						}
					}
					.lastItem{
						width: 629rpx;
						background-color: #fff;
						border-radius: 10rpx;
						margin: 37rpx auto;
						padding: 30rpx 0 98rpx 0;
						.topTag{
							width: 187rpx;
							height: 69rpx;
							padding-left: 10rpx;
							background: linear-gradient(0deg, #E5C6A7 0%, #EBD3BB 100%);
							box-shadow: 0rpx 6rpx 27rpx 0rpx rgba(204, 147, 114, 0.38);
							border-radius: 0rpx 35rpx 35rpx 0rpx;
							font: 400 32rpx/69rpx Source Han Sans CN;
							color: #743B1A;
							position: relative;
							image{
								width: 13rpx;
								height: 117rpx;
								position: absolute;
								left: -12rpx;
								top: -18rpx;
							}
						}
						.process{
							display: flex;
							// align-items: center;
							justify-content: space-between;
							// margin-top: 64rpx;
							padding: 64rpx 30rpx 30rpx 30rpx;
							border-bottom: 2rpx solid #eeeeee;
							.itemProcess{
								display: flex;
								flex-direction: column;
								align-items: center;
								font: 400 26rpx/30rpx Source Han Sans CN;
								color: #223663;
								.imgBox{
									width: 80rpx;
									height: 80rpx;
									border-radius: 50%;
									border: 2rpx solid #223663;
									display: flex;
									align-items: center;
									flex-direction: column;
									justify-content: center;
									image{
										width: 50rpx;
										height: 50rpx;
									}
								}
								.processText{
									display: flex;
									flex-direction: column;
									align-items: center;
									margin-top: 20rpx;
									font: 400 24rpx/30rpx Source Han Sans CN;
								}
							}
							.processIcon{
								height: 80rpx;
								line-height: 80rpx;
								color: #223663;
								display: inline-flex;
								align-items: center;
								font-size:22rpx;
								.iconfont{
									font-size: 20rpx; 
									color: #223663;
								}
							}
						}
						.lastText{
							padding: 0 30rpx;
							margin-top: 30rpx;
							font: 400 26rpx/30rpx Source Han Sans CN;
							color: #743B1A;
						}
					}
					.checkBottom{
						width: 100%;
						padding: 31rpx 30rpx 0;
						display: flex;
						justify-content: center;
						.checkBox{
							.u-checkbox__icon-wrap{
								border-color: #B75E24;
							}
							checkbox{
								width: 22rpx;
								height: 22rpx;
							}
							.checkText{
								font: 400 26rpx/76rpx Source Han Sans CN;
								color: #B75E24;
							}
						}
					}
					.lastBtn{
						width: 505rpx;
						height: 97rpx;
						padding-top: 10rpx;
						margin: 0rpx auto 94rpx;
						background: linear-gradient(0deg, rgba(218, 182, 147,0.1) 0%, rgba(202,143,111, 0.1) 100%);
						box-shadow: 0px 6rpx 8rpx 0px rgba(205, 150, 117, 0.1);
						border-radius: 49rpx;
						button{
							width: 481rpx;
							height: 80rpx;
							margin: 0 auto;
							border-radius: 40rpx;
							background: linear-gradient(0deg, #DAB693 0%, #CA8F6F 100%);
							font: bold 34rpx/80rpx Source Han Sans CN;
							color: #fff;
							
						}
					}
				}
			}
		}
	}
</style>
